<template>
  <div>
    <div class="head-container">
      <el-input
        v-model="tblDatabaseName"
        placeholder="请输入库名"
        style="width: 200px; margin-right: 20px"
      />
      <el-input
        v-model="tblName"
        placeholder="请输入表名"
        style="width: 200px; margin-right: 20px"
      />
      <el-button
        class="filter-item"
        size="mini"
        type="success"
        icon="el-icon-search"
        @click="search"
        >搜索</el-button
      >
      <el-button
        style="margin-left: 10px"
        class="filter-item"
        size="mini"
        type="warning"
        icon="el-icon-refresh-left"
        @click="reset"
        >重置</el-button
      >
    </div>
    <el-button
      type="primary"
      size="mini"
      :disabled="multipleSelection.length == 0"
      style="margin-bottom: 10px"
      @click="syncFlag = true"
      >批量确认</el-button
    >
    <el-button
      style="margin-bottom: 10px"
      type="primary"
      size="mini"
      :disabled="multipleSelection.length == 0"
      >批量过滤</el-button
    >
    <el-table :data="tabList" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="libName" label="库名" />
      <el-table-column prop="tblName" label="表名" />
      <el-table-column prop="time" label="确认时间" />
      <el-table-column prop="status" label="当前状态" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status != '已确认'"
            @click="syncFlag = true"
            >确认</el-button
          >
          <el-button size="mini" type="text" v-if="scope.row.status != '已过滤'"
            >过滤</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="syncCloses"
      :visible.sync="syncFlag"
      append-to-body
      title="同步方式配置"
      width="1000px"
    >
      <el-form :inline="true" label-width="70px">
        <div>
          <el-form-item label="库名">
            <el-input v-model="aForm.libNames" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="表名">
            <el-input v-model="aForm.tblNames" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="表中文名">
            <el-input v-model="aForm.chinese" placeholder="请输入"></el-input>
          </el-form-item>
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="primary" size="mini">清空</el-button>
        </div>
        <el-button
          type="primary"
          size="mini"
          :disabled="syncSelection.length == 0"
          @click="timeFlag = true"
          >批量扫描时间范围选择</el-button
        >
        <el-button
          type="primary"
          size="mini"
          :disabled="syncSelection.length == 0"
          @click="executeFlag = true"
          >批量执行时间设置</el-button
        >
        <el-button
          type="primary"
          size="mini"
          :disabled="syncSelection.length == 0"
          >批量立即执行</el-button
        >
        <el-table :data="syncTable" @selection-change="syncChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="libName" label="库名" />
          <el-table-column prop="tblName" label="表名" />
          <el-table-column prop="chinese" label="表中文名" />
          <el-table-column prop="filed" label="分区字段值" />
          <el-table-column prop="execute" label="执行时间">
            <template slot-scope="scope">
              {{ scope.row.execute }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="filedFlag = true"
                >字段查询</el-button
              >
              <el-button size="mini" type="text" @click="timeFlag = true"
                >扫描范围</el-button
              >
              <el-button size="mini" type="text" @click="executeFlag = true"
                >立即执行</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="syncCloses">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="timeCloses"
      :visible.sync="timeFlag"
      append-to-body
      title="时间范围选择"
      width="400px"
    >
      <el-tooltip
        class="item"
        effect="dark"
        content="同步几天之内的数据"
        placement="top"
      >
        <i
          class="el-icon-question"
          style="font-size: 16px; position: absolute; top: 9%; left: 33%"
        ></i>
      </el-tooltip>
      <el-form :inline="true" label-width="120px">
        <el-form-item label="时间范围">
          <el-select
            v-model="time"
            placeholder="请选择"
            style="width: 190px"
            clearable
          >
            <el-option v-for="val in timeList" :label="val" :value="val" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="timeCloses">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="executeCloses"
      :visible.sync="executeFlag"
      append-to-body
      title="执行时间设置"
      width="400px"
    >
      <el-tooltip
        class="item"
        effect="dark"
        content="何时进行同步"
        placement="top"
      >
        <i
          class="el-icon-question"
          style="font-size: 16px; position: absolute; top: 9%; left: 33%"
        ></i>
      </el-tooltip>
      <el-form :inline="true" label-width="120px">
        <el-form-item label="时间范围">
          <el-select
            v-model="execute"
            placeholder="请选择"
            style="width: 190px"
            clearable
          >
            <el-option v-for="val in executeList" :label="val" :value="val" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="executeCloses">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="filedCloses"
      :visible.sync="filedFlag"
      append-to-body
      title="字段详情"
      width="800px"
    >
      <el-tooltip
        class="item"
        effect="dark"
        content="字段详细信息"
        placement="top"
      >
        <i
          class="el-icon-question"
          style="font-size: 16px; position: absolute; top: 7%; left: 13%"
        ></i>
      </el-tooltip>
      <el-form :inline="true" label-width="80px">
        <el-form-item label="字段名" label-width="60px">
          <el-input v-model="filedForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="中文名" label-width="60px">
          <el-input v-model="filedForm.chinese" placeholder="请输入"></el-input>
        </el-form-item>
        <el-button type="primary" size="mini">查询</el-button>
        <el-button type="primary" size="mini">清空</el-button>
      </el-form>
      <el-table :data="filedTable">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="字段名" />
        <el-table-column prop="chinese" label="字段中文名" />
        <el-table-column prop="length" label="字段长度" />
        <el-table-column prop="type" label="字段类型" />
        <el-table-column prop="subarea" label="是否为分区字段" />
        <el-table-column prop="key" label="是否为主键" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="filedCloses">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tblDatabaseName: "",
      tblName: "",
      multipleSelection: [],
      syncSelection: [],
      syncFlag: false,
      time: "",
      execute: "",
      tabList: [
        {
          libName: "lib_A",
          tblName: "tbl_A",
          time: "2023-8-10 14:11:10",
          status: "待确认",
        },
        {
          libName: "lib_B",
          tblName: "tbl_B",
          time: "2023-8-11 12:17:14",
          status: "已确认",
        },
        {
          libName: "lib_C",
          tblName: "tbl_C",
          time: "2023-8-12 15:08:42",
          status: "已过滤",
        },
      ],
      aForm: {
        libNames: "",
        tblNames: "",
        chinese: "",
      },
      syncTable: [
        {
          libName: "lib_A",
          tblName: "tbl_A",
          chinese: "A表",
          filed: "20230811",
          execute: "2023-8-12 13:51:22",
        },
      ],
      timeFlag: false,
      filedFlag: false,
      executeFlag: false,
      timeList: ["1天", "3天", "5天", "7天", "14天", "28天"],
      executeList: [
        "00点",
        "01点",
        "02点",
        "03点",
        "04点",
        "05点",
        "06点",
        "07点",
        "08点",
        "09点",
        "10点",
        "11点",
        "12点",
        "13点",
        "14点",
        "15点",
        "16点",
        "17点",
        "18点",
        "19点",
        "20点",
        "21点",
        "22点",
        "23点",
      ],
      filedForm: {
        name: "",
        chinese: "",
      },
      filedTable: [
        {
          name: "name",
          chinese: "名称",
          length: "10",
          type: "string",
          subarea: "是",
          key: "是",
        },
      ],
    };
  },
  methods: {
    search() {
      console.log("search");
      //   this.getBasicData();
    },
    reset() {
      this.tblName = "";
      this.tblDatabaseName = "";
      //   this.getBasicData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    syncCloses() {
      this.syncFlag = false;
    },
    syncChange(val) {
      this.syncSelection = val;
    },
    timeCloses() {
      this.timeFlag = false;
    },
    executeCloses() {
      this.executeFlag = false;
    },
    filedCloses() {
      this.filedFlag = false;
    },
  },
};
</script>

<style>
</style>